<template>
<div id="orders" v-if="addresses[showaddress]">
    <NavBar>
  <div slot="left" class="left" @click="return_before"><van-icon name="arrow-left" /></div>
  <div slot="center">提交订单</div>

</NavBar>
<!-- <div class="common_list_con clearfix">-->
<!--        <dl>-->
<!--            <dt>寄送到：</dt>-->
<!--            <dd v-for='address in addresses' :class="[(nowsite==address.id)?'current':'']" @click="nowsite=address.id"><input type="radio" name="get_site" :value="address.id" v-model="nowsite">{{ address.province }} {{address.city}} {{ address.district }} {{ address.place }} （{{ address.receiver }} 收） {{ address.mobile }}</dd>-->
<!--        </dl>-->
<!--&lt;!&ndash;        <a href="user_center_site.html" class="edit_site">编辑收货地址</a>&ndash;&gt;-->
<!--    </div>-->
<!--</div>-->
  <div class="address_edit">
    <van-tag type="primary">{{addresses[showaddress].tag}}</van-tag>
    <span class="text_address"> {{addresses[showaddress].city}}{{ addresses[showaddress].district }}</span>
    <div class="place">
      {{addresses[showaddress].place}}
<!--      金海路2360号上海第二工业大学（金海路校区)-->

    </div>
    <div class="info">
      <span>{{addresses[showaddress].receiver}}</span>
    <span class="mobile">{{addresses[showaddress].mobile}}</span></div>
    <div class="icon" @click="$router.push('/addresschoice')"><van-icon name="arrow"/></div>
  </div>
<!--  商品信息-->
  <div class="goods_info">
    <ul c>
      <li v-for="item in skus" :key="item.id">
        <img :src="'/api/'+item.default_image_url">
        <span class="goods_name">{{item.name|ellipsis}}</span>
        <span class="count">x{{item.count}}</span>
        <span class="similar-product-price" >¥<span class="price">{{item.price}}</span></span>
      </li>
    </ul>
<!---->
  </div>
<!--  基本信息-->
  <div class="goods_info2">
    <div id="goods_info">
      <ul>
        <li><span class="title">服务</span><span class="goods_info_item">1年免费质保</span></li>
        <li><span class="title">配送</span><span class="goods_info_item">顺丰快递</span></li>
        <li><span class="title">退换无忧</span><span class="goods_info_item">七天无理由</span></li>
        <li><span class="title">留言</span><label><input type="text" class="goods_info_item" placeholder="建议提前沟通确认信息"></label></li>
      </ul>
    </div>
  </div>
<!--  金额信息-->
    <div class="goods_info2">
    <div id="goods_info2">
      <ul>
        <li><span class="title">总金额</span><span class="goods_info_item"><span class="priceclass">¥{{priceget}}</span></span></li>
        <li><span class="title">运费</span><span class="goods_info_item">¥{{freight}}</span></li>
        <li><span class="title">vip会员优惠金额</span><span class="goods_info_item">0</span></li>
<!--        <li><span class="title">优惠卷</span><label><input type="text" class="goods_info_item" placeholder="建议提前沟通确认信息"></label></li>-->
      </ul>
    </div>
  </div>
<!--  底部提交-->

  <div>
    <van-submit-bar
  button-text="提交订单"
  tip="受疫情因素影响，快递时效可能会有一定延迟"
  tip-icon="info-o"
  @submit="onSubmit"
    >
              <span class="similar-product-price2" >¥<span class="price2">{{priceget}}</span>
              <span>.00</span></span>
    </van-submit-bar>
  </div>
  <!--  输入支付密码层-->
<van-popup v-model="show" position="bottom" :style="{ height: '60%' }" closeable round>
  <div class="title_pay">
    输入数字支付密码
  </div>
  <!-- 密码输入框 -->
  <div class="password">
<van-password-input
  :value="value"
  :focused="showKeyboard"
  @focus="showKeyboard = true"
/>
</div>
<!-- 数字键盘 -->
<van-number-keyboard
  v-model="value"
  :show="showKeyboard"
  @blur="showKeyboard = false"
/>
  <van-loading size="24px" v-show="paywait" class="fix" color="red">提交订单中,请稍后...</van-loading>
</van-popup>

  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar/NavBar";
import {getorders} from "@/network/Users/orders";
import {postorder} from "@/network/Users/post_orders";

export default {
name: "orders",
  components:{NavBar},
  data(){
  return{
    addresses:[],
    skus:[],
    freight:0,
    nowsite:0, // 默认地址
    showaddress:this.$store.state.addressindex,
    price:0,
    show:false,
    value:'',
    showKeyboard:true,
    paywait:false
  }
  },
  computed:{
  priceget(){
    let price11=0
    for(var i=0; i<this.skus.length; i++) {
      price11 = parseInt(this.skus[i].price) * parseInt(this.skus[i].count) + price11
    }
      return price11
  }
  },
  methods:{
  // totalprice(){
    // let price1=0
    // for(var i=0; i<this.skus.length; i++){
    //   price1=parseInt(this.skus[i].price)*parseInt(this.skus[i].count)+price1
    //   console.log(this.skus[i].count);
    // }
    // console.log(price1);
    // this.price =parseInt(price1)},
  onSubmit(){
this.show=true
  },
  return_before(){
    history.go(-1)
  }
  },
  created() {

  this.$emit('header',false)

  getorders().then(
      res=>{
        console.log(res)
        this.addresses=res.context.addresses
        this.skus=res.context.skus
        this.freight=res.context.freight
      }
  )

  },
   filters: {
    ellipsis (value) {
      if (!value) return ''
      if (value.length > 20) {
        return value.slice(0,20) + '...'
      }
      return value
    }},
  watch:{
   value(value){
     if (value.length===6){
       this.paywait=true
       postorder(Math.abs(this.showaddress-4)).then(
           res=>{
             if (res.code===0){
               this.$router.push('/orderlist')
             }

           }
       )
     }

    }
  }
}
</script>

<style scoped>
#orders{
  background-color: rgb(247,248,250);
  height: 1000px;
  color: #262626;;
}
.left .van-icon {
    font-size: 20px;
    position: relative;
    top: 3px;
    left: -8px;
}
.address_edit{
  background-color:white;
  padding:18px;
  letter-spacing: 0.028em;
  border-radius: 0px 0px 15px 15px;
  height: 130px;
}
.text_address{
  font-size: 14px;
  margin-left: 6px;
}
.place{
  margin: 0 auto;
  color: #262626;
font-size: 18px;
  margin-top: 10px;
  text-align: left;
  font-weight: 700;

}
.info{
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #262626;
}
.mobile{
  margin-left: 6px;
}
.icon{
font-size: 17px;
position: fixed;
right: 10px;
top: 94px;
  cursor: pointer;
}
img{
  height: 80px;
  width: 80px;
}
.goods_info{
  background-color: white;
  margin-top: 20px;
  border-radius:15px 15px 15px 15px;
  padding: 18px;
}
.goods_info2{
  background-color: white;
  margin-top: 20px;
  border-radius:15px 15px 15px 15px;
  padding: 1px 18px 18px 18px;
}
.goods_info li{
  margin-top: 12px;
  position: relative;
}
.goods_name{
  position: absolute;
left: 97px;
font-size: 12px;
color: #262626;
}
.count{
  bottom: 0px;
  position: absolute;
  right: 0;
  color: #c0c0c0;
  font-size: 14px;
}
 .similar-product-price{
   position: absolute;
color: #fa2c19;
font-size:10px;
font-family: Arial;
   left: 98px;
bottom: 0px;
  }
 .price{
  font-size:16px
}
  .similar-product-price2{
  position: absolute;
color: #fa2c19;
font-size: 16px;
font-family: Arial;
left: 18px;
bottom: 12px;
  }
 .price2{
  font-size:21px
}
 .title{

 }
 #goods_info{
   font-size: 14px;
 }
 #goods_info ul li{
   margin-top: 20px;
   position: relative;
 }
 .goods_info_item{
   position:absolute ;
   right: 0;
 }
 input{
   border: 0;
   width: 141px;
 }
  #goods_info2{
   font-size: 14px;
 }
 #goods_info2 ul li{
   margin-top: 20px;
   position: relative;
 }
  .priceclass{
    color: skyblue;
font-size: 16px;
font-family: Arial;
letter-spacing: 0.048em;
  }
  .title_pay{
    position: relative;
    top: 14px;
    left: 95px;
    font-size: 20px;
  }
 /* .goods_info_item input{*/
 /*  position:absolute ;*/
 /*  right: 0;*/
 /*   !*display: inline-block;*!*/
 /*}*/
.password{
  position:relative;
  top: 51px;
}
.fix{
  position: fixed;
  top: 150px;
  left: 85px;
}
</style>